<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>shidaiclient</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/static/lib/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="/static/components/css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/static/components/css/welfare.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="{{ url_for('home.game_welfare') }}"></a>
    <h1 class="mui-title" style="font-size:0.3rem ;color: #333333;font-weight: normal;">游戏福利</h1>
</header>

<div class="mui-content">
    <div id="welfare_detail_content">
        <!--<ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media main_column"><img class="mui-media-object mui-pull-left" src="//cdn.shidaiwl.cn/game-source/game/257002e6c64f14a3d3f6de1b99d2c66b.png">
                <div class="mui-media-body main_title">大话蜀山</div>
                <div class="mui-media-body">
                    <div style="display: inline;">
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="final_score">&nbsp;&nbsp;5.0</span>
                    </div>
                    <span class="mui-pull-right iconfont icon-xiazai hot_download button_download" data_android_link="xxx" data_ios_link="xxx">下载</span>
                </div>
                <div class="mui-media-body mui-ellipsis">
                    <span class="tag_flag">竞技</span>
                    <span class="tag_flag">对抗</span>
                </div>
            </li>
        </ul>
        <div class="welfare_item">
            <div class="welfare_detail_maintitle">
                下载福利礼包
            </div>
            <div class="welfare_detail_cut_off_line"></div>
            <div>
                <div class="welfare_detail_sectitle">
                    适用平台
                </div>
                <div class="welfare_detail_seccontent">
                    仅限iOS
                </div>
                <div class="welfare_detail_cut_off_line"></div>
            </div>
            <div>
                <div class="welfare_detail_sectitle">
                    礼包内容
                </div>
                <div class="welfare_detail_seccontent">
                    金币*888、铭纹碎片*20、钻石*66、王昭君*3天
                </div>
                <div class="welfare_detail_cut_off_line"></div>
            </div>
            <div>
                <div class="welfare_detail_sectitle">
                    领取条件
                </div>
                <div class="welfare_detail_seccontent">
                    在本平台完成游戏的下载，即可领取打开游戏-商城-兑换-输入兑换码-点击兑换
                </div>
                <div class="welfare_detail_cut_off_line"></div>
            </div>
            <div>
                <div class="welfare_detail_sectitle">
                    使用方法
                </div>
                <div class="welfare_detail_seccontent">
                    打开游戏-商城-兑换-输入兑换码-点击兑换
                </div>
                <button type="button" data-loading-text="领取中..." class="welfare_detail_getit mui-btn mui-btn-primary" data-loading-icon="mui-spinner mui-spinner-custom" id="xxx" limit="xxx">
                            领取礼包
                </button>
    </div>
</div>-->

    </div>
</div>
<!-- build:js /static/js/welfare_detail.min.js -->
<script src="/static/lib/js/mui.min.js"></script>
<script src="/static/components/js/util.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/lib/js/jquery.js" type="text/javascript"></script>
<!-- endbuild -->
<script src="/static/components/js/ag.js" type="text/javascript"></script>

<script type="text/javascript">
    window.onload = function () {
        var base_url = '{{ g.api_url }}';
        var channel_code = '{{ g.channel_code }}';

        loadingAnalyze('{{ g.analyze_url }}');

        var theGameId = window.name;
        //获取游戏福利详情
        request(base_url + '/game/member/gift/game/' + channel_code + '/' + theGameId + '?token=' + localStorage.getItem('token'), null)
                .done(function (data) {
                    dealGameWelfare(data);
                })
                .fail(function () {
                    console.log('获取游戏福利详情 error');
                });

        function dealGameWelfare(json) {
            var welfare_detail_content = document.getElementById('welfare_detail_content');
            var secTitle = isNull(json.game_title) == "" ? "" : "-" + json.game_title;

            /*获取星星显示的span*/
            var starSpan = '';
            var score_avg = json.score_avg == null ? '5.0' : json.score_avg; //分数
            var score_avg_x10 = score_avg * 10;
            var score_avg_x10_ = score_avg_x10 % 10;
            if (score_avg_x10_ > 0 && score_avg_x10_ <= 5) {
                needHalfStar = true;
            } else {
                needHalfStar = false;
            }
            //alert(needHalfStar);
            for (var home_hotgame_starnum = 0; home_hotgame_starnum < 5; home_hotgame_starnum++) {
                if (home_hotgame_starnum < parseInt(score_avg)) {
                    starSpan += '<span class="iconfont icon-xing1"></span>';
                } else {
                    if (home_hotgame_starnum == parseInt(score_avg) && needHalfStar) {
                        starSpan += '<span class="iconfont icon-ban_xing2"></span>';
                    } else {
                        if (home_hotgame_starnum == parseInt(score_avg) && score_avg_x10_ > 5) {
                            starSpan += '<span class="iconfont icon-xing1"></span>';
                        } else {
                            starSpan += '<span class="iconfont icon-xingxing"></span>';
                        }
                    }
                }
            }

            //有颜色的tag
            var all_tag_span = '';
            var colors = ["#7cc9ff", "#ff9999", "#4cac47", "#ffae00", "#b057ca", "#ffae00"];
            for (var colorsnum = 0; colorsnum < json.categories.length; colorsnum++) {
                var n = Math.floor(Math.random() * colors.length + 1) - 1;
                var span = document.createElement('span');
                span.className = 'tag_flag';
                span.style.color = colors[n];
                span.style.borderStyle = "solid ";
                span.style.borderWidth = "1px ";
                span.style.borderColor = colors[n];
                span.innerText = json.categories[colorsnum].name;
                all_tag_span += span.outerHTML;
            }

            var tmp = '<ul class="mui-table-view"><li class="mui-table-view-cell mui-media main_column"><img class="mui-media-object mui-pull-left" src="' +
                    json.icon + //icon
                    '"><div class="mui-media-body main_title">' +
                    json.game_name + //游戏名称
                    '<span class="welfare_column_title_tail">' +
                    secTitle + //副标题
                    '</span></div><div class="mui-media-body"><div style="display: inline;">' +
                    starSpan + //星星
                    '<span class="final_score">&nbsp;&nbsp;' +
                    formateFixedOne(score_avg) + //分数
                    '</span></div><span class="mui-pull-right iconfont icon-xiazai hot_download button_download" data_android_link="' +
                    getRealLink(json.channel_game.android_link,json.android_link) + //安卓链接
                    '" data_ios_link="' +
                    getRealLink(json.channel_game.ios_link,json.ios_link) + //IOS链接
                    '" data-code ="' +
                    json.code + //data-code
                    '" data-id ="' +
                    localStorage.getItem('user_id') + //data-code
                    '">下载</span></div><div class="mui-media-body mui-ellipsis">' +
                    all_tag_span + //标签
                    '</div></li></ul>';

            var tmpwelfareall = '';
            for (var num = 0; num < json.gift_activity.length; num++) {

                var button = document.createElement('button');
                button.setAttribute("type", "button");
                button.setAttribute("data-loading-text", "领取中...");
                button.setAttribute("data-loading-icon", "mui-spinner mui-spinner-custom");
                button.setAttribute("id", json.gift_activity[num].id);
                button.setAttribute("limit", json.gift_activity[num].limit);
                button.setAttribute("user_discuss", json.user_discuss);
                button.setAttribute("user_download", json.user_download);
                button.className = "welfare_detail_getit mui-btn mui-btn-primary";
                button.innerText = "领取礼包";
                switch (json.gift_activity[num].participated) {
                    case 4:
                        button.setAttribute("disabled", "true");
                        button.style.backgroundColor = "#999";
                        button.innerText = "福利被领完了";
                        break;
                    case 8:
                        button.setAttribute("disabled", "true");
                        button.style.backgroundColor = "#999";
                        button.innerText = "已领取";
                        break;
                }
                var tmpwelfare = '<div class="welfare_item"><div class="welfare_detail_maintitle">' +
                        json.gift_activity[num].activity_name + //福利标题
                        '</div><div class="welfare_detail_cut_off_line"></div><div><div class="welfare_detail_sectitle">适用平台</div><div class="welfare_detail_seccontent">' +
                        json.gift_activity[num].platform + //适用平台
                        '</div><div class="welfare_detail_cut_off_line"></div></div><div><div class="welfare_detail_sectitle">礼包内容</div><div class="welfare_detail_seccontent">' +
                        json.gift_activity[num].gift_content + //礼包内容
                        '</div><div class="welfare_detail_cut_off_line"></div></div><div><div class="welfare_detail_sectitle">领取条件</div><div class="welfare_detail_seccontent">' +
                        json.gift_activity[num].limit_detail + //领取条件
                        '</div><div class="welfare_detail_cut_off_line"></div></div><div><div class="welfare_detail_sectitle">使用方法</div><div class="welfare_detail_seccontent">' +
                        json.gift_activity[num].use_detail + //使用方法
                        '</div>' +
                        button.outerHTML;
                tmpwelfareall += tmpwelfare;
            }

            welfare_detail_content.innerHTML = tmp + tmpwelfareall;
            //下载按钮
            mui('.mui-media-body').on('tap', '.button_download', function () {
                download(this, isIOSClient(), this.getAttribute('data_ios_link'), this.getAttribute('data_android_link'));
                updateButtonDownloadNum();
            });
            var me = '';
            //点击领取的时候创建福利订单,然后每间隔3秒获取一次福利订单,超过3次领取不到提示错误
            mui(document.body).on('tap', '.mui-btn', function (e) {
                if (!isMissionDone(this.getAttribute('limit'), this.getAttribute('user_download'), this.getAttribute('user_discuss'))) {
                    return;
                }
                mui(this).button('loading');
                //			            alert(this.id);
                //						alert(this.getAttribute('limit'));

                me = this;
                //						创建福利订单
                request(base_url + '/game/member/gift/order?token=' + localStorage.getItem('token'), {
                    "type": "json",
                    "content": {
                        "activity_id": this.id
                    }
                }, "post")
                        .done(function (data) {
                            dealCreateWelfareOrder(data);
                        })
                        .fail(function () {
                            console.log('创建福利订单 error');
                        });

                function dealCreateWelfareOrder(json) {
                    //创建订单返回结果中要判断状态-- 1 未处理  2 失败  4 已经发放完  8 成功
                    if (json.status == 1) {
                        //								创建后每隔3秒查询一次服务器
                        queryDealResult(json.id);
                    }
                    //							setTimeout(function() {
                    //								showCode(465464);
                    //								mui(me).button('reset');
                    //							}.bind(this), 2000);
                }

                //查询服务器领取情况
                function queryDealResult(id) {
                    var timesRun = 0;
                    var interval = setInterval(function () {
                        timesRun += 1;
                        if (timesRun == 3) {
                            clearInterval(interval);
                            mui.toast('领取失败');
                            mui(me).button('reset');
                        }
                        //查询服务器领取情况
                        request(base_url + '/game/member/gift/order/' + id + '?token=' + localStorage.getItem('token'))
                                .done(function (data) {
                                    console.log(JSON.stringify(data));

                                    if (data.status == 4) {
                                        clearInterval(interval);
                                        mui(me).button('reset');
                                        me.style.backgroundColor = "#999";
                                        me.setAttribute("disabled", true);
                                        me.innerText = "福利被领完了";
                                        return;
                                    }

                                    if (data.status == 8) {
                                        clearInterval(interval);
                                        mui(me).button('reset');
                                        showCode(data.git_detail.redemption_code);

                                    }
                                })
                                .fail(function () {
                                    console.log('查询服务器领取情况 error');
                                });

                    }, 2000);
                }

                //显示兑换码
                function showCode(code) {
                    var body = document.getElementsByTagName('body');
                    var temdiv = document.createElement('div');
                    temdiv.innerHTML = '<div id="a" class="mui-popup mui-popup-in" style="display: block;;"><div class="mui-popup-inner"><div class="mui-popup-title"></div><div class="mui-popup-text" style="font-size: 0.26rem;color: #333333;">恭喜你获得下载福利礼包<div style="color:#FF6494;padding-top: 0.2rem;">' +
                            code + //兑换码
                            '</div></div></div><div class="mui-popup-buttons" style="background-color: rgba(255,255,255,0.95)"><span class="mui-popup-button" style="color: white;">复制兑换码</span></div></div><div id="b" class="mui-popup-backdrop mui-active" style="display: block;"></div>';
                    body[0].appendChild(temdiv);
                    mui('div').on('tap', '.mui-popup-buttons', function () {
                        var a = document.getElementById('a');
                        var b = document.getElementById('b');
                        a.remove();
                        b.remove();
                        me.innerText = '已领取';
                        me.style.backgroundColor = '#999';
                        me.setAttribute("disabled", true);
                    });
                }

            });

            function isMissionDone(limit, downloadNum, commentNum) {
                if (limit == 0) {
                    return true;
                }
                if (limit == 1 && downloadNum > 0) {
                    return true;
                } else if (limit == 1) {
                    mui.toast('请先完成下载任务');
                }
                if (limit == 2 && commentNum > 0) {
                    return true;
                } else if (limit == 2) {
                    mui.toast('请先完成评论任务');
                }
                return false;
            }

            //在当前页点击下载时更新一下下载次数
            function updateButtonDownloadNum() {
                var buttons = document.getElementsByTagName('button');
                for (var btn_num = 0; btn_num < buttons.length; btn_num++) {
                    if (buttons[btn_num].getAttribute('limit') == 1) {
                        buttons[btn_num].setAttribute("user_download", 1);
                    }
                }
            }
        }
    }
</script>
</body>

</html>